<!DOCTYPE html>
<html lang='en'>

<head>
   <meta charset='UTF-8'>
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
   <meta name='viewport' content='width=device-width, initial-scale=1.0'>
   <title>Document</title>
   <script src='../vue.js'></script>
</head>

<body>
   <div id='app'>
      <h1>{{msg}}</h1>
   </div>
      <script>
         const vm = new Vue({
         el: '#app',
         /* - data配置项可以是Object 也可以是 Function,但是在组件中必须使用function格式

            组件中data为什么是一个函数而不是对象???
            - 当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。
               如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！
               通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。 
         */
            /* data: {
               msg: "hello Vue"
            } */
            data() {
               return {
                  msg: 'Hello Vue!!!'
               }
            }
         })
      </script>
</body>

</html>